<template>
  <div class="infoProd-container">
    <div class="infoProd">
      <div class="infoProd-item infoProd-item-small">
        <div class="infoProd-item-container whiteContainer" style="border-radius: 5px">
          <div class="titleHeader top-radius">基本信息</div>
          <div class="contentBody">
            <div class="item-contentBody image-big-prod">
              <img :src="basicInfo.productMainImage" alt="">
            </div>
            <div class="item-contentBody image-prod">
              <div class="image-prod-item" v-for="item in basicInfo.skuImageUrl">
                <img :src="item" alt="">
              </div>
            </div>
            <div class="item-contentBody desc-prod">
              <div class="desc-prod-item">
                <div class="option-name">产品名:</div>
                <div class="option-value">{{basicInfo.productName}}</div>
              </div>
              <div class="desc-prod-item">
                <div class="option-name">产品型号:</div>
                <div class="option-value">{{basicInfo.productCode}}</div>
              </div>
              <!--<div class="desc-prod-item">-->
                <!--<div class="option-name">上市时间:</div>-->
                <!--<div class="option-value">2018-02-01</div>-->
              <!--</div>-->
              <div class="desc-prod-item">
                <div class="option-name">在售状态:</div>
                <div class="option-value" v-if="basicInfo.isSale == '1'">在售</div>
                <div class="option-value" v-else>下市</div>
              </div>
              <!--<div class="desc-prod-item">-->
                <!--<div class="option-name">SUK数:</div>-->
                <!--<div class="option-value">4</div>-->
              <!--</div>-->
            </div>
          </div>
        </div>
      </div>
      <div class="infoProd-item infoProd-item-max" style="background-color: #ffffff;justify-content:center;">
        <div class="infoProd-item-container">
          <div class="infoProd-item-container-item selling-point boederSet">
            <div class="titleHeader">产品卖点</div>
            <div class="contentBody">
              <el-table :data="sellingPoints" stripe border
                        class="setHeight" style="width: 100%;border-radius: 4px;">
                <el-table-column
                  prop="id"
                  width="80"
                  label="序号"
                  :index="indexMethod">
                </el-table-column>
                <el-table-column
                  prop="sellingPoint"
                  label="卖点">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="infoProd-item-container-item target-container boederSet" style="margin-top: 12px;">
            <target-compent></target-compent>
          </div>
          <div class="infoProd-item-container-item sales-talk boederSet" style="margin-top: 12px;">
            <div class="titleHeader">销售话术</div>
            <div class="sales-talk-container" style="padding: 12px;" >
              {{textarea}}
            </div>
          </div>
          <div class="infoProd-item-container-item specification-containerSet boederSet" >
            <specification-compent :param="productCode"></specification-compent>
          </div>
          <div class="infoProd-item-container-item sales-talk boederSet" style="margin-top: 12px;">
            <div class="titleHeader">上市详情</div>
            <div class="sales-talk-container" style="padding: 12px;" >
              <el-table
                :data="saleState"
                stripe
                border
                class="setHeight"
                style="width: 100%;border-radius: 4px;">
                <el-table-column
                  prop="province"
                  label="省份/直辖市">
                </el-table-column>
                <el-table-column label="城市（上市时间）">
                  <template slot-scope="scope">
                    <span v-for="item in scope.row.cityList">{{item.city}}({{item.date}})、</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SpecificationCompent from './specificationCompent'
  import TargetCompent from './targetCompent'
  import {  mapActions } from 'vuex'
  import * as opreator from 'api/getData'

  export default {
      name: "info-prod",
      data() {
          return {
            basicInfo:'',
            param:'',
            sellingPoints:[],
            textarea: '',
            prodTargetPopulation: {},
            saleState:[]
          }
      },
      components:{
        SpecificationCompent,
        TargetCompent
      },
      props:['productCode'],
      mounted() {
        this.getData(this.productCode)
      },
      methods: {
        ...mapActions(["obtainProdTargetPopulation"]),
        indexMethod(index){
          return (index + 1)
        },
        getData(productCode){
          opreator.productInfo(productCode).then(res => {
            this.basicInfo = res.data
          })
          opreator.salePoint(productCode).then(res => {
            this.sellingPoints = res.data
          })
          opreator.saleWords(productCode).then(res => {
            this.textarea = res.data
          })
          opreator.saleState(productCode).then(res => {
            this.saleState = res.data
          })
          this.obtainProdTargetPopulation(productCode)
        }
      },
    watch:{
      productCode(newVal){
        this.getData(newVal)
      }
    }
  }
</script>

<style scoped>
  .infoProd-container{
    display: flex;
  }
  .infoProd{
    display: flex;
    width: 100%;
  }
  .infoProd-item-small{
    display: flex;
    flex: 1;
  }
  .infoProd-item-max{
    display: flex;
    flex: 2;
    justify-content: flex-end;
  }
  .infoProd-item-container{
    width: 98%;
  }
  .contentBody{
    padding: 12px;
    display: flex;
    flex-direction: column;
  }
  .titleHeader{
    font-weight: bold;
  }

  /**
  * @desc: This is Note
  * infoProd-item-small/CSS
  * @author: WJ
  * @date: 2018/09/27 20:10:50
  **/
  .image-big-prod{
    display: flex;
    justify-content: center;
    border: 1px solid #E0E8EF;
    border-radius: 4px;
    padding: 12px 0;
  }
  .image-big-prod img{
    width: 200px;
    height: 200px;
  }
  .image-prod{
    display: flex;
    justify-content: space-around;
    margin: 30px 0 12px 0;
  }
  .image-prod-item{
    border: 1px solid #E0E8EF;
    padding: 12px;
  }
  .image-prod-item img{
    width: 60px;
    height: 60px;
  }
  .desc-prod{
    display: flex;
    flex-direction: column;
  }
  .desc-prod-item{
    display: flex;
  }
  .desc-prod-item+ .desc-prod-item{
    margin-top: 5px;
  }
  .option-name{
    width: 72px;
  }
  .option-value{
    flex: 1;
  }

  /**
  * @desc: This is Note
  * infoProd-item-max/CSS
  * @author: WJ
  * @date: 2018/09/27 20:10:50
  **/
  .infoProd-item-container-item{
    background: white;
  }
  .specification-containerSet{
    margin-top: 12px;
  }
</style>
